import React, { Component } from 'react';
import CaseStore, { CaseDataTable } from '../../stores/CaseStore';
import { RouterStore } from 'mobx-react-router';
import { inject, observer } from 'mobx-react';
import { NavBar, Icon } from 'antd-mobile';
import { Table } from 'antd';

import Collapse, { Panel } from '../../component/collapse/Collapse';

import './UnDone.scss';

interface UnDoneProps {
    caseStore: CaseStore;
    routingStore: RouterStore;
}

const StatisticsColumns = [
    {
        dataIndex: 'caseHandleStatistics',
        key: 'caseHandleStatistics',
        render: (text: string) => {
            return (<span className="statistics-str">{text}</span>);
        }
    }];
const FlowColumns = [
    {
        dataIndex: 'title',
        key: 'title',
        render: (text: string) => {
            return (<span className="table-title">{text + ':'}</span>);
        }
    },
    {
        dataIndex: 'info',
        key: 'info',
        render: (text: string, record: string, index: number) => {
            return <span>{text}</span>;
        }
    }
];
const InfoColumns = [
    {
        dataIndex: 'title',
        key: 'title',
        width: '100px',
        render: (text: string) => {
            return (<span className="table-title">{text + ':'}</span>);
        }
    },
    {
        dataIndex: 'info',
        key: 'info',
        render: (text: string) => {
            return (<span>{text}</span>);
        }
    }
];
@inject('caseStore', 'routingStore', 'componentStore')
@observer
export default class UnDone extends Component<UnDoneProps> {
    componentWillMount() {
        this.props.caseStore.getCaseHandleStatistics();
        this.props.caseStore.getCaseHandleFlow();
        this.props.caseStore.getCaseHandleInfo();
    }
    render(): JSX.Element {
        const { caseStore, routingStore } = this.props;
        const caseHandleStatistics = caseStore.caseHandleStatistics;
        const caseFlowTableList = caseStore.CaseFlowTableList;
        const caseHandleInfo = caseStore.CaseHandeInfo;
        return (
            <div className="undone-box">
                <NavBar
                    mode="light"
                    className="nav-box"
                    icon={<Icon type="left" />}
                    leftContent={<span style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>返回</span>}
                    onLeftClick={() => { routingStore.goBack(); }}
                >
                    <span className="list-title">详情</span> 
                </NavBar>
                <div className="undone-container">
                    <Collapse>
                        <Panel
                            title="工单办理统计"
                            canBeHidden={false}
                        >
                            <div>
                                {<Table
                                    dataSource={caseHandleStatistics}
                                    columns={StatisticsColumns}
                                    bordered={true}
                                    pagination={false}
                                    showHeader={false}
                                />}
                            </div>
                        </Panel>
                        <Panel
                            title="流程信息"
                            canBeHidden={true}
                        >
                            <div className="flow-list">
                                {
                                    // 渲染表格组
                                    caseStore.CaseFlowTableList.map((v: CaseDataTable[], i: number) =>
                                        (<div className="flow-item">
                                            <Table
                                                dataSource={v}
                                                columns={FlowColumns}
                                                bordered={true}
                                                pagination={false}
                                                showHeader={false}
                                            />
                                            <div>
                                                {
                                                    // 处理箭头和收起
                                                    i !== (caseFlowTableList.length - 1) ?
                                                        <div className="arrow-down" /> :
                                                        undefined
                                                }

                                            </div>
                                        </div>)
                                    )
                                }
                            </div>
                        </Panel>
                        <Panel
                            title="办理信息"
                            canBeHidden={false}
                        >
                            <div>
                                <Table
                                    dataSource={caseHandleInfo}
                                    columns={InfoColumns}
                                    bordered={true}
                                    pagination={false}
                                    showHeader={false}
                                />
                            </div>
                        </Panel>
                    </Collapse>
                </div>

            </div >
        );
    }
}